<template>
  <div class="wp" v-if="values">
    <div class="box" style="text-align: left">
      <span class="tit">项目详细设置</span>
      <!-- 关闭 -->
      <div class="closeWrapper" @click="closeModel">
        <div class="i-1"></div>
        <div class="i-2"></div>
      </div>
      <!-- 内容 -->
      <div class="contentBox">
        <!-- <treeModel
          v-show="types == 1"
          @ok="ModelOne"
          ref="treeModelOne"
        ></treeModel> -->
        <!-- <treeModelTwo
          v-show="types == 2"
          @ok="ModelTwo"
          ref="treeModelTwo"
        ></treeModelTwo> -->
        <treeFusCaliModel
          v-show="types == 1"
          @ok="ModelFusCali"
          ref="treeModelFusCali"
        ></treeFusCaliModel>
        <treeLIDARModel
          v-show="types == 2"
          @ok="ModelLIDAR"
          ref="treeModelLIDAR"
        ></treeLIDARModel>
        <treeModelThree
          v-show="types == 3"
          @ok="ModelThree"
          ref="treeModelThree"
        ></treeModelThree>
        <treeModelFour
          v-show="types == 4"
          @ok="ModelFour"
          ref="treeModelFour"
        ></treeModelFour>
      </div>
      <!-- 按钮 -->
      <div class="btnBox">
        <button class="btn-1" @click="detailedBtn">确定</button>
        <button class="btn-2" @click="closeModel">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import treeModelFour from "@/components/newIndexCopy/models/treeModelFour.vue";
import treeModelThree from "@/components/newIndexCopy/models/treeModelThree.vue";
import treeModelTwo from "@/components/newIndexCopy/models/treeModelTwo.vue";
import treeModel from "@/components/newIndexCopy/models/treeModel.vue";
import treeFusCaliModel from "@/components/newIndexCopy/models/treeFusCaliModel.vue";
import treeLIDARModel from '@/components/newIndexCopy/models/treeLIDARModel.vue'
import { defineComponent, toRaw } from "vue";
export default defineComponent({
  data() {
    return {
      values: false,
      types: 0,
    };
  },
  components: {
    treeModel,
    treeModelTwo,
    treeModelThree,
    treeModelFour,
    treeFusCaliModel,
    treeLIDARModel,
  },
  created() {},
  mounted() {},
  methods: {
    show(val) {
      console.log('show',val);
      this.types = val;
      this.values = true;
    },
    closeModel() {
      this.values = false;
    },
    // 确定触发
    detailedBtn() {
      // if (this.types == 1) {
      //   this.$refs.treeModelOne.Sub();
      //   this.values = false;
      // }
      // if (this.types == 2) {
      //   this.$refs.treeModelTwo.Sub();
      //   this.values = false;
      // }
      if (this.types == 1) {
        this.$refs.treeModelFusCali.Sub();
        console.log('????queding ');
        this.values = false;
      }
      if (this.types == 2) {
        this.$refs.treeModelLIDAR.Sub();
        this.values = false;
      }
      if (this.types == 3) {
        this.$refs.treeModelThree.Sub();
        this.values = false;
      }
      if (this.types == 4) {
        this.$refs.treeModelFour.Sub();
        this.values = false;
      }
    },
    // 详细设置传值
    ModelOne(data) {
      console.log('详细设置传值',data);
      if (data.ShowName == true) {
        let EchoList = [1];
        sessionStorage.setItem("EchoList", JSON.stringify(EchoList));
        console.log('??????=======',sessionStorage.getItem("EchoList"));
      } else {
        let EchoList = [];
        sessionStorage.setItem("EchoList", JSON.stringify(EchoList));
      }
      if (data.ShowStep == true && data.ShowTip == true) {
        let EchoListTwo = [1, 0];
        sessionStorage.setItem("EchoListTwo", JSON.stringify(EchoListTwo));
      } else if (data.ShowStep == false && data.ShowTip == false) {
        let EchoListTwo = [];
        sessionStorage.setItem("EchoListTwo", JSON.stringify(EchoListTwo));
      } else {
        if (data.ShowStep == true) {
          let EchoListTwo = [1];
          sessionStorage.setItem("EchoListTwo", JSON.stringify(EchoListTwo));
        }
        if (data.ShowTip == true) {
          let EchoListTwo = [0];
          sessionStorage.setItem("EchoListTwo", JSON.stringify(EchoListTwo));
        }
      }
      this.$emit("PopupOne", data);
    },
    ModelTwo(data) {
      console.log(data);
      sessionStorage.setItem("CalibrationList", JSON.stringify(data));
      this.$emit("PopupTwo", data);
    },
    ModelFusCali(data) {
      console.log('ModelFusCali',data);
      sessionStorage.setItem("FusionCalibrationList", JSON.stringify(data));
      this.$emit("PopupFusCali", data);
    },
    ModelLIDAR(data) {
      console.log('ModelLIDAR',data);   
      sessionStorage.setItem("LIDARList", JSON.stringify(data));
      this.$emit("PopupLIDAR", data);
    },
    ModelThree(data) {
      console.log(toRaw(data));
      sessionStorage.setItem("AgreementList", JSON.stringify(data));
      this.$emit("PopupThree", data);
    },
    ModelFour(data) {
      console.log(data);
      sessionStorage.setItem("LaneDetectList", JSON.stringify(data));
      this.$emit("PopupFour", data);
    },
  },
});
</script>

<style lang="less" scoped>
.wp {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 999;
}
.box {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 360px;
  min-height: 500px;
  background: #ffffff;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  transform: translate(-50%, -50%);
  padding: 20px 20px 0px 20px;
}
.tit {
  font-size: 24px;
  font-weight: 500;
  color: #81859c;
  line-height: 36px;
}
.closeWrapper {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: RGBA(230, 231, 235, 1);
  border-radius: 50%;
  z-index: 999;
}
.i-1,
.i-2 {
  position: absolute;
  left: 22%;
  top: 45%;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background-color: #81859c;
}
.i-1 {
  transform: rotate(45deg);
}
.i-2 {
  transform: rotate(-45deg);
}
.btnBox {
  position: absolute;
  bottom: 40px;
}
.btnBox button {
  outline: none;
  border: none;
  width: 120px;
  height: 50px;
  font-size: 21px;
  border-radius: 10px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 5px;
}
.btn-1 {
  margin-left: 20px;
  background: linear-gradient(270deg, #218cde 0%, #807de1 100%);
}
.btn-2 {
  margin-left: 40px;
  background: #81859c;
}
.contentBox {
  padding-bottom: 110px;
}
</style>